<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生管理</title>
    <script src="js/jquery-3.6.3.min.js.txt"></script>
    <script>
        $(function () {
            var pageNo = 1;
            var maxpage = 1;
            var sname = null;
            var QQ = null;
            var tel = null;
            var start = null;
            var end = null;

            function doLoad() {
                let t = $("#userTable");
                t.find("tr:gt(0)").remove();
                $.get("studentsAjax.do", {
                    pageNo: pageNo,
                    sname: sname,
                    QQ: QQ,
                    tel: tel,
                    start: start,
                    end: end
                }, function (p) {

                    //清空表格中原来的数据

                    //填充a链接的 data-page
                    $("#pager a#prev").attr("data-page", p.pageNo - 1);
                    $("#pager a#next").attr("data-page", p.pageNo + 1);
                    $("#pager a#last").attr("data-page", p.pageTotal);

                    $("#goto").val(p.pageNo);
                    $("#goto").attr("max", p.pageTotal);
                    $("span#maxpage").text(p.pageTotal);

                    maxpage = p.pageTotal;
                    $.each(p.data, function (i, o) {
                        t.append(`<tr>
                    <td>${o.stuno}</td>
                    <td>${o.sname}</td>
                    <td>${o.sex}</td>
                    <td>${o.telephone}</td>
                    <td>${o.wechat}</td>
                    <td>${o.QQ}</td>
                    <td>${o.gradeid}</td>
                    <td>${o.enterdate}</td>
                     <td><a href="#" id="update" data-id="${o.stuno}">修改</a> &nbsp;
                        <a href="#" id="del" data-id="${o.stuno}">删除</a>&nbsp;
                        <a href="#">查看成绩</a></td>

                    </tr>`);
                    });
                });
            }

            doLoad();
            $("#pager a").click(function () {
                pageNo = $(this).attr("data-page");
                if (pageNo < 1)
                    return false;
                if (pageNo > maxpage)
                    return false;

                doLoad();
                return false;
            });
            $("#go").click(function () {
                pageNo = $(this).prev().val();
                doLoad();
            });
            $("#searchForm").submit(function () {
                pageNo = 1;
                sname = $("[name=sname]").val();
                QQ = $("[name=QQ]").val();
                tel = $("[name=tel]").val();
                start = $("[name=start]").val();
                end = $("[name=end]").val();

                doLoad();
                return false;
            });
            //删除
            $("#userTable").on("click", "a#del", function () {
                if (!window.confirm("真的要删除?"))
                    return false;

                let stuno = $(this).attr("data-id");
                $.get("delStudent.do", {stuno: stuno}, function (r) {
                    //alert(r+">>>>>>>>>")
                    if (!r.success) {
                        alert(r.msg);//
                        return;
                    }
                    alert("删除成功");
                    doLoad();
                });
                return false;
            });
            //修改
            $("#userTable").on("click", "a#update", function () {

                let stuno = $(this).attr("data-id");
                //>window.sessionStorage.setItem("stuno",stuno);

                window.location="updateStudent.html?"+stuno;
                return false;
            });

        });
    </script>
</head>
<body>
<div>

    <form action="#" id="searchForm">
        <input type="hidden" name="pageNo" id="pageNo" value="1">
        <input name="sname" value="" placeholder="姓名"/>
        <input name="tel" value="" placeholder="电话"/>
        <input name="QQ" value="" placeholder="QQ号"/>
        入学时间从<input type="date" name="start" value=""/>-
        <input type="date" name="end" value=""/>
        <input type="submit" value="搜索">
    </form>
    <a href="addStudent.jsp">添加新生</a>
</div>
<table id="userTable" border="1" width="100%" cellpadding="0" cellspacing="0">
    <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>手机号</th>
        <th>微信</th>
        <th>QQ</th>
        <th>年级</th>
        <th>入学时间</th>
        <th>操作</th>
    </tr>

</table>
<p id="pager">
    <a href="#" id="first" data-page="1">首页</a>
    <a href="#" id="prev" data-page="1">上一页</a>
    <input type="number" min="1" id="goto" value="" max="1" style="width: 48px"/><input type="button" id="go"
                                                                                        value="Go"/>/<span
        id="maxpage"></span>
    <a href="#" id="next" data-page="1">下一页</a>
    <a href="#" id="last" data-page="1">尾页</a>
</p>
</body>
</html>